<template>
	<view class="pages">
		<view class="head">
			<image class="headImg" src="/static/loginBg.png" mode="widthFix"></image>
			<view class="headLogoBox">
				<image class="pages_logo" src="/static/logo.png" mode="widfix" />
			</view>
		</view>
		<view class="pages_content">
			<!-- <text class="pages_title">进销存物流公司登录</text> -->
			<uni-forms class="uniForms" ref="useForm" :modelValue="forms">
				<uni-forms-item name="name">
					<view class="pages_phone borderBottom">
						<fui-input :size="25" :inputBorder="false" :borderBottom="false" placeholder="请输入物流公司" v-model="forms.company">
							<template v-slot:left>
								<image class="prefix" src="/static/logisticsCompany/company.png" mode="widthFix"></image>
							</template>
						</fui-input>
					</view>
				</uni-forms-item>

				<uni-forms-item name="bd">
					<view class="pages_phone uploadArea borderBottom">
						<view class="uploadImg">
							<image class="prefix" src="/static/logisticsCompany/yyzz.png" mode="widthFix"></image>
						</view>
						<view class="uploadImgContent">
							<view class="uploadBox" @click="uploadImage(1)">
								<image v-if="!forms.license.length" :key="license" class="icon" src="/static/yyzz.png" mode="widthFix"></image>
								<image v-else class="icon" :key="forms.license[0].path" :src="baseFilesVisitURL + forms.license[0].path" mode="widthFix"></image>
								<!-- <u-icon name="plus" size="28"></u-icon> -->
							</view>
							<text class="text err" v-if="!forms.license.length">请上传营业执照</text>
							<text class="text sus" v-else>已上传营业执照</text>
						</view>
					</view>
					<!-- 如果上传过了显示上传的图片，可以点击放大也可以删除重新上传 -->
					<!-- <view class=""></view> -->
				</uni-forms-item>

				<uni-forms-item name="name">
					<view class="pages_phone borderBottom">
						<fui-input :size="25" :inputBorder="false" :borderBottom="false" placeholder="报车人姓名" v-model="forms.name">
							<template v-slot:left>
								<image class="prefix" src="/static/logisticsCompany/name.png" mode="widthFix"></image>
							</template>
						</fui-input>
					</view>
				</uni-forms-item>

				<uni-forms-item name="name">
					<view class="pages_phone borderBottom">
						<fui-input :size="25" maxlength="11" :inputBorder="false" :borderBottom="false" placeholder="报车人手机号" v-model="forms.phone">
							<template v-slot:left>
								<image class="prefix" src="/static/logisticsCompany/phone.png" mode="widthFix"></image>
							</template>
						</fui-input>
					</view>
				</uni-forms-item>

				<uni-forms-item name="bd">
					<view class="pages_phone uploadArea borderBottom">
						<view class="uploadImg">
							<image class="prefix" src="/static/logisticsCompany/idcard.png" mode="widthFix"></image>
						</view>
						<view class="">
							<view class="uploadImgContent">
								<view class="uploadImgTwoUpload">
									<view class="uploadBox" @click="uploadImage(2)">
										<image v-if="!forms.idcarda.length" :key="idcarda" class="icon" src="/static/sfzzm.png" mode="widthFix"></image>
										<image v-else class="icon" :key="forms.idcarda[0].path" :src="baseFilesVisitURL + forms.idcarda[0].path" mode="widthFix"></image>
									</view>
									<view class="uploadBox" @click="uploadImage(3)">
										<image v-if="!forms.idcardb.length" :key="idcardb" class="icon" src="/static/sfzfm.png" mode="widthFix"></image>
										<image v-else class="icon" :key="forms.idcardb[0].path" :src="baseFilesVisitURL + forms.idcardb[0].path" mode="widthFix"></image>
									</view>
								</view>

								<text class="text"></text>
								<text class="text err" v-if="!forms.idcarda.length && !forms.idcardb.length">请上传身份证正/反面</text>
								<text class="text err" v-else-if="forms.idcarda.length && !forms.idcardb.length">已上传身份证正面,请上传反面</text>
								<text class="text err" v-else-if="!forms.idcarda.length && forms.idcardb.length">请上传身份证反面,请上传正面</text>
								<text class="text sus" v-else>已上传身份证正/反面</text>
							</view>
						</view>
					</view>
					<!-- 如果上传过了显示上传的图片，可以点击放大也可以删除重新上传 -->
					<!-- <view class=""></view> -->
				</uni-forms-item>

				<uni-forms-item name="name">
					<view class="pages_phone borderBottom">
						<fui-input :size="25" :inputBorder="false" :borderBottom="false" placeholder="收款人姓名" v-model="forms.accountName">
							<template v-slot:left>
								<image class="prefix" src="/static/logisticsCompany/skname.png" mode="widthFix"></image>
							</template>
						</fui-input>
					</view>
				</uni-forms-item>
				<uni-forms-item name="name">
					<view class="pages_phone borderBottom">
						<fui-input :size="25" maxlength="19" :inputBorder="false" :borderBottom="false" placeholder="收款账号" v-model="forms.account">
							<template v-slot:left>
								<image class="prefix" src="/static/logisticsCompany/bank.png" mode="widthFix"></image>
							</template>
						</fui-input>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="register">
				<text @click="navTo('/pages/logisticsCompany/login/login')">已有账号?点击登录</text>
			</view>
			<!-- btn -->
			<button type="primary" class="loginUp" @click="login">注册</button>
			<!-- ends -->
			<view class="isAgree">
				<fui-label>
					<view class="fui-align__center">
						<fui-checkbox scaleRatio="0.6" borderRadius="10rpx" :checked="checked" @change="checkBoxChanage"></fui-checkbox>
						<text class="fui-text">选中及代表同意</text>
						<navigator url="/pages/webview/wb?src=https://www.haskills.com/yhsc_service.html">
							<text class="navigator">用户协议</text>
						</navigator>
						<text class="fui-text">和</text>
						<navigator url="/pages/webview/wb?src=https://www.haskills.com/yhsc_secret.html">
							<text class="navigator">隐私政策</text>
						</navigator>
					</view>
					<text class="fui-text">适用范围：本应用程序仅限进销存渠道使用</text>
				</fui-label>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { onBeforeMount, onMounted, reactive, ref, toRefs, getCurrentInstance } from 'vue';
import { storeToRefs } from 'pinia';
import http, { baseFilesVisitURL } from '@/common/request.js';
import { urlToObj, sgoto, navTo, setLoadingToast, setToast, setUserIdentity, uploadFile } from '@/common/utils.js';
import useStore from '@/store';
import { cloneDeep } from 'lodash';
import { forIn } from 'lodash';

// 公司全局状态管理器
const { useLogisicsCompany } = useStore();

// state
const { userInfo } = storeToRefs(useLogisicsCompany);

// action
const { companyRegister, getToken } = useLogisicsCompany;

// 登录表单
const forms = reactive({
	company: '', // 物流公司名称
	license: [], // 营业执照
	idcarda: [], // 身份证正面
	idcardb: [], // 身份证反面
	phone: '', // 报车人手机号
	name: '', // 报车人姓名
	account: '' // 收款账号
});

const keyName = {
	company: '物流公司名称',
	license: '营业执照',
	idcarda: '身份证正面',
	idcardb: '身份证反面',
	phone: '报车人手机号',
	name: '报车人姓名',
	account: '收款账号'
};

const checked = ref(false);

const checkBoxChanage = (e) => {
	// console.log('e ====> ', e);
	checked.value = e.checked;
};
// 状态控制
const lockClick = (lock) => {
	forms.isLock = lock;
};

// 登录
const login = () => {
	if (!checked.value) {
		setToast('请同意并勾选下方政策协议后操作~');
		return;
	}
	const newData = cloneDeep(forms);
	let error = [];
	forIn(newData, (v, key) => {
		switch (key) {
			case 'license':
			case 'idcarda':
			case 'idcardb':
				if (!newData[key].length) {
					error.push(`请上传${keyName[key]}`);
				}
				newData[key] = JSON.stringify(v);
				break;
			default:
				if (!newData[key]) {
					error.push(`请完善${keyName[key]}`);
				}
				break;
		}
	});
	// 有错误中断
	if (error.length) {
		return setToast(error[0]);
	}

	// 注册
	try {
		companyRegister(newData);
	} catch (e) {
		//TODO handle the exception
		uni.hideLoading();
	}
};

// 上传图片
const uploadImage = (type) => {
	// type == 1 营业执照 license
	// type == 2 身份证正面 idcarda
	// type == 3 身份证反面 idcardb
	const keyslocal = {
		1: 'license',
		2: 'idcarda',
		3: 'idcardb'
	};
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album'], //从相册选择
		success: async (res) => {
			uploadFile(res.tempFilePaths[0])
				.then((res) => {
					// 上传成功
					const dep = res;
					console.log('res ==> ', res);
					res.type = 'image';
					dep.suffix = '.' + dep.suffix;
					forms[keyslocal[type]] = [dep];
				})
				.catch((err) => {
					setToast('上传失败');
				});
		}
	});
};
//
onMounted(() => {
	setUserIdentity();
	// 判断是否已经登陆了 如果有token
	console.log('getToken ==========> ', getToken);
	if (getToken) {
		navTo('/pages/logisticsCompany/index/index');
	}
});
</script>

<style scoped lang="scss">
@import './register.scss';
</style>
